window.onload = function(){
    var focusPic = (function(){
        var prev = document.getElementById('prev');
        var next = document.getElementById('next');
        //div width
        var imgWidth = 720;
        //
        var num = 3;
        //
        var timer;
        var second = 3*1000;
        
        var outsideBox = document.getElementById('outsideBox');

        function move(offset){
            var left = parseInt(outsideBox.style.left) + offset; //
            outsideBox.style.left = left + 'px';
        }

        // prev.style.visibility = 'hidden';
        // next.style.visibility = 'hidden';
        // var visib = document.getElementsByClassName('pic-window');
        // visib.onmouseover = function(){
        //     prev.style.visibility = 'visible';
        //     next.style.visibility = 'visible';
        // }
        // visib.onmouseout = function(){
        //     prev.style.visibility = 'hidden';
        //     next.style.visibility = 'hidden';
        // }

        next.onclick = function(){
            // console.log('im running'); left要定义在html里边 css上获取不到，是否可以@import css文件就可以了呢？
            move(-imgWidth);
        }
        prev.onclick = function(){
            move(imgWidth);
        }

        function play(){
            timer = setInterval(function(){
                next.onclick();
            },second)
        }

        function stop(){
            clearInterval(timer);
        }
    })();

    var changeClass = (function(){

        var titleSpan = document.getElementsByClassName('word-title-span'); //这里应该是个数组[]

        function hasClass(obj,cls){
            return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
        }

        function addClass(obj,cls){
            if(!hasClass(obj,cls)){
                //效果一样
                //obj.classList.add(cls);
                obj.className += " " + cls;
            }
        }

        function removeClass(obj,cls){
            if(hasClass(obj,cls)){
                obj.classList.remove(cls);
            }
        }

        function toggleClass(obj,cls){
            if(hasClass(obj,cls)){
                removeClass(obj,cls);
            }else{
                addClass(obj,cls);
            }
        }

        function judgmentContent(){
            var content = document.getElementsByClassName('word-section-info');
            for(var i = 0; i < titleSpan.length ; i++){
                content[i].style.display = 'none';
                if(hasClass(titleSpan[i],'word-title-active')){
                    content[i].style.display = 'block';
                }
            }

        }

        judgmentContent();
        for(var i = 0; i < titleSpan.length ; i++){
            titleSpan[i].onclick = function(){
                //console.log("im click!");
                //能不能只添加，原来的都还在？ += !
                //还有就是同级的元素判断有没有class 去除class active
                //this.className = 'word-title-active fl word-title-span';
                var _self = this;      
                //console.log(_self.parentNode.children);
                var childrens = _self.parentNode.children;
                for(var j = 0; j < childrens.length ; j++){
                    removeClass(childrens[j],'word-title-active');
                }
                addClass(_self,'word-title-active');
                judgmentContent();
            }
        }
    })();

}